/*
 * @Author: liuzt
 * @Date: 2024-04-03 13:51:01
 * @LastEditors: 王庆庆
 * @LastEditTime: 2024-11-09 21:08:22
 * @Description: 全局样式、主题色、公共类名
 * 5是主色，--theme-color是主题色，sub是辅助色
 */

/* color palette from <https://github.com/vuejs/theme> */
// TODO 根据设计图修改--theme-color、--space，其他酌情修改 5是主色
:root {
	--vt-c-white: #f4f5fa;
	--vt-c-white-soft: #ffffff;
	--vt-c-white-mute: #f2f2f2;
	--vt-c-white-text: #333333;

	--vt-c-black: #181818;
	--vt-c-black-soft: #222222;
	--vt-c-black-mute: #282828;

	--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
	--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
	--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
	--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);

	--vt-c-text-light-1: var(--vt-c-white-text);
	--vt-c-text-light-2: #666666;
	--vt-c-text-dark-1: var(--vt-c-white);
	--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
	--space: 16px;
	--theme-color: #d8af83;
	--theme-color1: #fdf7e9;
	--theme-color2: #fbedd3;
	--theme-color3: #f3ddb9;
	--theme-color4: #e7c9a3;
	--theme-color5: #d8af83;
	--theme-color6: #b9895f;
	--theme-color7: #9b6742;
	--theme-color8: #7d4829;
	--theme-color9: #673219;
	--sub1-color: #70111f;
	--sub1-color1: #f7d7cd;
	--sub1-color2: #f0a99f;
	--sub1-color3: #d46c68;
	--sub1-color4: #a93d43;
	--sub1-color5: #70111f;
	--sub1-color6: #600c20;
	--sub1-color7: #500820;
	--sub1-color8: #40051e;
	--sub1-color9: #35031d;
	--sub2-color: #273b54;
	--sub2-color1: #dcecf6;
	--sub2-color2: #bad8ed;
	--sub2-color3: #8aadcb;
	--sub2-color4: #5b7998;
	--sub2-color5: #273b54;
	--sub2-color6: #1c2d48;
	--sub2-color7: #13223c;
	--sub2-color8: #0c1730;
	--sub2-color9: #071028;
	--sub3-color: #5f7c5a;
	--sub3-color1: #f1f8ea;
	--sub3-color2: #e1f1d7;
	--sub3-color3: #bed7b4;
	--sub3-color4: #94b08c;
	--sub3-color5: #5f7c5a;
	--sub3-color6: #446a41;
	--sub3-color7: #2d592d;
	--sub3-color8: #1c4720;
	--sub3-color9: #113b18;

	--md-theme-color-reverse: #eee;
	--md-theme-color-hover: #eee;
	--md-theme-color-hover-inset: #ddd;
	--md-theme-link-color: #2d8cf0;
	--md-theme-link-hover-color: #73d13d;
	--md-theme-border-color: #e6e6e6;
	--md-theme-border-color-reverse: #bebebe;
	--md-theme-border-color-inset: #d6d6d6;
	--md-theme-bg-color: #fff;
	--md-theme-bg-color-inset: #ececec;
	--md-theme-bg-color-scrollbar-track: #e2e2e2;
	--md-theme-bg-color-scrollbar-thumb: rgba(0, 0, 0, 0.3019607843);
	--md-theme-bg-color-scrollbar-thumb-hover: rgba(0, 0, 0, 0.3490196078);
	--md-theme-bg-color-scrollbar-thumb-active: rgba(0, 0, 0, 0.3803921569);
	--md-theme-code-copy-tips-color: inherit;
	--md-theme-code-copy-tips-bg-color: #fff;
	--md-theme-code-active-color: #61aeee;
}
.md-editor-dark .md-editor-preview {
	--md-theme-color: var(--md-color);
	--md-theme-color-reverse: #222;
	--md-theme-color-hover: #191919;
	--md-theme-color-hover-inset: #444;
	--md-theme-link-color: #2d8cf0;
	--md-theme-link-hover-color: #73d13d;
	--md-theme-border-color: #2d2d2d;
	--md-theme-border-color-reverse: #e6e6e6;
	--md-theme-border-color-inset: #5a5a5a;
	--md-theme-bg-color: #000;
	--md-theme-bg-color-inset: #111;
	--md-theme-bg-color-scrollbar-track: #0f0f0f;
	--md-theme-bg-color-scrollbar-thumb: #2d2d2d;
	--md-theme-bg-color-scrollbar-thumb-hover: #3a3a3a;
	--md-theme-bg-color-scrollbar-thumb-active: #3a3a3a;
}

/* semantic color variables for this project */
:root {
	--color-background: var(--vt-c-white);
	--color-background-soft: var(--vt-c-white-soft);
	--color-background-mute: var(--vt-c-white-mute);

	--color-border: var(--vt-c-divider-light-2);
	--color-border-hover: var(--vt-c-divider-light-1);

	--color-text: var(--vt-c-text-light-1);

	--section-gap: 160px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-background: var(--vt-c-black);
		--color-background-soft: var(--vt-c-black-soft);
		--color-background-mute: var(--vt-c-black-mute);

		--color-border: var(--vt-c-divider-dark-2);
		--color-border-hover: var(--vt-c-divider-dark-1);

		--color-text: var(--vt-c-text-dark-2);
	}
}

// 可被用到js/ts中
:export {
	// themeColor: var(--theme-color);
}

.flex {
	display: flex;
}

.flex-end {
	display: flex;
	justify-content: flex-end;
}

.flex-1 {
	flex: 1;
}

/* 改变方向 */
.flex-column {
	display: flex;
	flex-direction: column;
}

.flex-no-wrap {
	display: flex;
	flex-wrap: nowrap;
}

.flex-wrap {
	display: flex;
	flex-wrap: wrap;
}

/* 组合属性 start */

/* 等间距对齐 */
.flex-between {
	display: flex;
	justify-content: space-between;
}

/* 两端对齐 */
.flex-around {
	display: flex;
	justify-content: space-around;
}

/* 水平居中 */
.flex-x-center {
	display: flex;
	justify-content: center;
}

/* 垂直居中 */
.flex-y-center {
	display: flex;
	align-items: center;
}

/* 等间距垂直居中 */
.flex-between-y-center {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* 两端垂直居中 */
.flex-around-y-center {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

/* 水平垂直居中 */
.flex-both-center {
	display: flex;
	justify-content: center;
	align-items: center;
}
.ellipsis {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.ellipsis1 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.ellipsis2 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.pointer {
	cursor: pointer;
}

.common-card {
	background: var(--color-background-soft);
	border-radius: 4px;
	padding: var(--space);
}
.w50 {
	width: 50% !important;
}
.w100 {
	width: 100% !important;
}
.scrollbar {
	overflow-y: auto;

	&::-webkit-scrollbar {
		width: 7px;
	}

	&::-webkit-scrollbar-thumb {
		background: #e0e4f0;
		border-radius: 5px;
	}

	&::-webkit-scrollbar-track {
		background: #f2f5fd;
	}
}
/* 透明滚动条样式 */
.scrollbar-hidden {
	overflow-y: auto;
	&::-webkit-scrollbar {
		width: 0;
	}
	&::-webkit-scrollbar-thumb {
		background: transparent;
		border-radius: 0;
	}
	&::-webkit-scrollbar-track {
		background: transparent;
	}
}

/* 水平滚动条 */
.scrollbar-x-bigscreen {
	overflow-x: auto;
	&::-webkit-scrollbar {
		height: 6px;
	}
	&::-webkit-scrollbar-thumb {
		background: rgba(91, 196, 255, 0.6);
		border-radius: 0;
	}

	&::-webkit-scrollbar-track {
		background: rgba(91, 196, 255, 0.2);
	}
}

.scrollbar-y-bigscreen {
	overflow-y: auto;
	&::-webkit-scrollbar {
		width: 6px;
	}
	&::-webkit-scrollbar-thumb {
		background: rgba(63, 74, 84, 0.8);
		border-radius: 0;
	}

	&::-webkit-scrollbar-track {
		background: rgba(63, 74, 84, 0.2);
	}
}
pre {
	background-color: var(--md-theme-quote-bg-color);
	border-radius: 6px;
	padding: 10px;
}
h1 {
	margin-left: 10px;
}

h2 {
	margin-left: 20px;
}

h3 {
	margin-left: 3dvh;
}
blockquote {
    margin-top: 10px;
	margin-left: 10px;
	padding: 0 1.2em;
	line-height: 2em;
	display: block;
	overflow: auto;
	color: #3f4a54;
	border-left: 5px solid #35b378;
	background-color: #ececec;
}

p {
	line-height: 1.6;
	margin: 0.5rem 0;
}
